<!--  -->
<script setup>
import { ref } from 'vue'
import CommentBox from './CommentBox.vue'
import render from './render'
import LikeOrBad from '@/views/quest/components/LikeOrBad.vue'

defineProps({ commentData: Array })
const box = ref(null)

function doReply(to) {
  box.value.insert('@' + to + ' ')
}

function doQuote(to, content) {
  box.value.insert('@' + to + '\n' + addRefChar(content) + '\n---\n')

  function addRefChar(t) {
    // 给每行添加引用字符
    return t.split('\n').map((item) => '> ' + item).join('\n')
  }
}

function scrollToAndHighlight(id) {
  const element = document.getElementById(id)
  if (element == null) return
  let targetPosition = element.getBoundingClientRect().top + window.scrollY
  window.scrollTo({
    top: targetPosition - 60,
    behavior: 'smooth'
  })
  highlight()

  function highlight() {
    const raw = element.style.color
    element.style.color = 'red'
    setTimeout(() => element.style.color = raw, 2000)
  }
}
</script>

<template>
  <div class="view-wrapper">
    <div class="comment-container" v-for="(item, idx) in commentData" :key="item.id">
      <div class="comment">
        <div class="profile-info">
          <div class="username" :id="item.id">
            #{{ idx + 1 }}
            {{ item.fromName }}
          </div>
        </div>
        <div class="post-content">
          <div class="post-header">
            <div class="post-info">
              共 {{ item.reply.length }} 条回复
            </div>
            <div class="post-buttons">
              <span class="date">{{ item.date }}</span>
              <span title="回复" @click="doReply(item.fromName)" class="icon icon-reply"></span>
              <span title="引用" @click="doQuote(item.fromName, item.content)" class="icon icon-quote"></span>
            </div>
          </div>
          <div class="post-body" v-html="render(item.content)"> </div>
        </div>
      </div>
      <div class="replies">
        <div class="reply" v-for="reply in item.reply" :key="reply.id">
          <div class="profile-info">
            <div class="username" :id="reply.id">{{ reply.fromName }}</div>
          </div>
          <div class="post-content">
            <div class="post-header">
              <div class="post-info">
                <a @click.prevent="scrollToAndHighlight(reply.replyId)" :href="'#' + reply.replyId">
                  <span class="icon icon-at"></span>
                </a>
                {{ reply.toName }}
              </div>
              <div class="post-buttons">
                <span class="date">{{ item.date }}</span>
                <span title="回复" @click="doReply(reply.fromName)" class="icon icon-reply"></span>
                <span title="引用" @click="doQuote(reply.fromName, reply.content)" class="icon icon-quote"></span>
              </div>
            </div>
            <div class="post-body" v-html="render(reply.content)"> </div>
          </div>
        </div>
      </div>
    </div>
    <CommentBox ref="box"></CommentBox>
  </div>
</template>

<style scoped lang="scss">
.comment-container {
  margin: 10px 0;

  .comment {
    display: flex;
    min-height: 100px;
    background-color: #F6F6F6;
  }

  .replies {
    margin-left: 20px;
  }

  .reply {
    background-color: #F6F6F6;
    margin-top: 10px;
    display: flex;
    min-height: 70px;
  }
}

.comment .profile-info {
  min-width: 200px;
}

.reply .profile-info {
  min-width: 180px;
}

.profile-info {
  background: var(--comment-linear-01);
  margin: 5px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-secondary);


  .username {
    font-weight: bold;
    border-bottom: 1px solid var(--comment-title-fc);
    width: max-content;
    color: var(--comment-title-fc);
  }

  .date {
    color: var(--text-02)
  }

  .flex {
    margin-top: auto;
    margin-bottom: 5px;
  }
}

.post-content {
  flex: 1;
  display: flex;
  flex-direction: column;

  .post-header {
    background-color: var(--comment-header-bgc);
    display: flex;
    justify-content: space-between;
    margin: 5px;
    border-bottom: 1px solid var(--border-secondary);

    .post-info {
      color: #767876;
      font-style: italic;
    }

    .post-buttons span {
      padding: 0 10px;
      cursor: pointer;
    }
  }

  .post-body {
    flex: 1;
    padding: 10px 5px;
    background: var(--comment-linear-02);
    padding-bottom: 2em;
  }
}


.icon {
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: middle;
  display: inline-block;
  background-color: var(--icon-bgc);
  margin: 1px;

  &:hover {
    background-color: red;
  }
}

.icon-reply {
  width: 18px;
  height: 18px;
  mask-image: url('/static/svg/reply.svg');
}

.icon-quote {
  width: 18px;
  height: 18px;
  mask-image: url('/static/svg/quote.svg');
}

.icon-at {
  width: 14px;
  height: 14px;
  mask-image: url('/static/svg/at.svg');
}


@media screen and (max-width: 769px) {

  .comment,
  .reply {
    flex-direction: column;
  }

  .profile-info {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #00661b;
  }

  .post-content {
    border-left: 0;
  }
}
</style>
